﻿<UserControl x:Class="Blacklight.Controls.MediaPlayer"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:Blacklight.Controls"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
    >
    
    <UserControl.Resources>
        <Storyboard x:Key="ShowBar">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="barTranslate" Storyboard.TargetProperty="(TranslateTransform.Y)">
                <SplineDoubleKeyFrame Value="0" KeyTime="00:00:00.2" KeySpline="0.528,0,0.142,0.847" />
                <SplineDoubleKeyFrame Value="0" KeyTime="00:00:03" />
                <SplineDoubleKeyFrame Value="30" KeyTime="00:00:03.2" KeySpline="0.528,0,0.142,0.847" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>
    <Border x:Name="root">
        <Border.Clip>
            <RectangleGeometry Rect="0,0,800,600" x:Name="playerClip" />
        </Border.Clip>
    <Grid Background="Black">
        
        <!-- Main media element -->
        <MediaElement x:Name="media"
                      MediaOpened="Media_MediaOpened"
                      MediaEnded="Media_MediaEnded"
                      MouseMove="Media_MouseMove"
                      MediaFailed="Media_MediaFailed"
                      Volume="11"
                      />
        
        <!-- Buffering grid (when the media is buffering) -->
        <Grid x:Name="bufferingGrid" Opacity="0" IsHitTestVisible="False">
            <Rectangle Margin="-50">
                <Rectangle.Fill>
                    <RadialGradientBrush>
                        <GradientStop Color="#cc000000" Offset="0" />
                        <GradientStop Color="#cc000000" Offset="3" />
                        <GradientStop Color="#66000000" Offset="1" />
                    </RadialGradientBrush>
                </Rectangle.Fill>
            </Rectangle>
            
                <local:LoadingAnimation x:Name="loadingAnimation">
                    <local:LoadingAnimation.EllipseFill>
                        <RadialGradientBrush>
                            <GradientStop Color="#FFffffff"/>
                            <GradientStop Color="#00ffffff" Offset="1"/>
                        </RadialGradientBrush>
                    </local:LoadingAnimation.EllipseFill>
                    
                    <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
                        <TextBlock     FontFamily="Verdana" FontSize="11" Foreground="#99ffffff"
                                   VerticalAlignment="Center" Margin="0,0,0,5"
                                   Text="B U F F E R I N G"
                                   HorizontalAlignment="Center"
                                   />
                        <TextBlock x:Name="buffer"     FontFamily="Verdana" FontSize="11" Foreground="#99ffffff"
                                       VerticalAlignment="Center" Margin="0,0,0,5"
                                       Text="0%"
                                       HorizontalAlignment="Center"
                                       />
                    </StackPanel>
                </local:LoadingAnimation>
            
        </Grid>

            <Grid x:Name="failedGrid" Opacity="0" IsHitTestVisible="False" >
                <Rectangle Margin="-50">
                    <Rectangle.Fill>
                        <RadialGradientBrush>
                            <GradientStop Color="#cc000000" Offset="0" />
                            <GradientStop Color="#cc000000" Offset="3" />
                            <GradientStop Color="#66000000" Offset="1" />
                        </RadialGradientBrush>
                    </Rectangle.Fill>
                </Rectangle>

                <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
                    <TextBlock     FontFamily="Verdana" FontSize="11" Foreground="#99ffffff"
                               VerticalAlignment="Center" Margin="0,0,0,5"
                               Text="M E D I A  F A I L E D  T O  L O A D"
                               HorizontalAlignment="Center"
                               />
                </StackPanel>

            </Grid>

            <!-- Click to play grid -->
        <Grid x:Name="clickToPlayGrid"  Opacity="0">
            <Rectangle Margin="-50" IsHitTestVisible="False">
                <Rectangle.Fill>
                    <RadialGradientBrush>
                        <GradientStop Color="#cc000000" Offset="0" />
                        <GradientStop Color="#cc000000" Offset="3" />
                        <GradientStop Color="#66000000" Offset="1" />
                    </RadialGradientBrush>
                </Rectangle.Fill>
            </Rectangle>

            <Border CornerRadius="0,0,0,0" 
                    Cursor="Hand"
                    BorderBrush="#99ffffff" BorderThickness="2"
                    Height="120" Width="160"
                    VerticalAlignment="Center" HorizontalAlignment="Center"
                    Background="#99000000"
                    x:Name="clickToPlayBorder"
                    MouseLeftButtonUp="ClickToPlayBorder_MouseLeftButtonUp"
                    >
                <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
                    
                    <Path HorizontalAlignment="Center" VerticalAlignment="Center" Fill="#99FFFFFF" Stretch="Fill" Data="M43.583637,12.897726 L25.0625,3.5625 L25.0625,21.874741 z" 
                          Width="40" Height="40" 
                          Margin="0,0,0,15"/>
                    
                    <TextBlock     FontFamily="Verdana" FontSize="11" Foreground="#99ffffff"
                               VerticalAlignment="Center" Margin="0,0,0,5"
                               Text="C L I C K  T O  P L A Y"
                               HorizontalAlignment="Center"
                               />
                </StackPanel>
            </Border>

        </Grid>



        <!-- Player bar grid -->
        <Grid VerticalAlignment="Bottom" Height="30" x:Name="bar"
              MouseEnter="Bar_MouseEnter"
              MouseLeave="Bar_MouseLeave">
            <Grid.RenderTransform>
                <TranslateTransform Y="30" x:Name="barTranslate" />
            </Grid.RenderTransform>
            <Border Padding="5" Background="#99000000">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    
                    <ToggleButton x:Name="playPause"
                                  IsChecked="True"
                                  Margin="0,0,0,0"
                                  Width="40"
                                  Checked="PlayPause_Checked"
                                  Unchecked="PlayPause_Unchecked"
                                  Cursor="Hand"
                              >
                        <ToggleButton.Template>
                            <ControlTemplate TargetType="ToggleButton">
                                <Grid Background="Transparent">
                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="FocusStates">
                                            <VisualState x:Name="Focused"/>
                                            <VisualState x:Name="Unfocused"/>
                                        </VisualStateGroup>
                                        <VisualStateGroup x:Name="CommonStates">
                                            <VisualState x:Name="Disabled"/>
                                            <VisualState x:Name="Normal"/>
                                            <VisualState x:Name="MouseOver">
                                                <Storyboard/>
                                            </VisualState>
                                            <VisualState x:Name="Pressed"/>
                                        </VisualStateGroup>
                                        <VisualStateGroup x:Name="CheckStates">
                                            <VisualState x:Name="Checked">
                                                <Storyboard>
                                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="play" Storyboard.TargetProperty="(UIElement.Opacity)" BeginTime="00:00:00" Duration="00:00:00.0010000">
                                                        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="pause" Storyboard.TargetProperty="(UIElement.Opacity)" BeginTime="00:00:00" Duration="00:00:00.0010000">
                                                        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                </Storyboard>
                                               
                                            </VisualState>
                                            <VisualState x:Name="Unchecked">
                                                <Storyboard>
                                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="play" Storyboard.TargetProperty="(UIElement.Opacity)" BeginTime="00:00:00" Duration="00:00:00.0010000">
                                                        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="pause" Storyboard.TargetProperty="(UIElement.Opacity)" BeginTime="00:00:00" Duration="00:00:00.0010000">
                                                        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="Indeterminate"/>
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>
                                    <Border BorderBrush="#99FFFFFF" BorderThickness="1,1,1,1" x:Name="background">
                                        <Grid>
                                            <Path HorizontalAlignment="Center" VerticalAlignment="Center" Fill="#99FFFFFF" Stretch="Fill" Data="M43.583637,12.897726 L25.0625,3.5625 L25.0625,21.874741 z" Width="12" Height="12" x:Name="play"/>
                                            <Path HorizontalAlignment="Center" VerticalAlignment="Center" Fill="#99FFFFFF" Stretch="Fill" Data="M9.875,0 L15.875,0 L15.875,16 L9.875,16 L9.875,0 z M0,0 L6,0 L6,16 L0,16 L0,0 z" Width="12" Height="12" x:Name="pause" Opacity="0"/>
                                        </Grid>
                                    </Border>
                                </Grid>
                            </ControlTemplate>
                        </ToggleButton.Template>
                    </ToggleButton>
                    
                    <Border 
                            Grid.Column="1" Margin="5,0,5,0"
                            BorderBrush="#99ffffff" BorderThickness="1"
                            Height="20" 
                            >
                        <Canvas x:Name="scrubCanvas" Background="Transparent" Cursor="Hand"
                                MouseLeftButtonDown="ScrubCanvas_MouseLeftButtonDown"
                               >
                            
                            <Rectangle x:Name="playPosition"
                                       Fill="#99ffffff" Height="18"
                                       HorizontalAlignment="Left" Width="0"
                                       IsHitTestVisible="False"
                                       />
                        </Canvas>
                    </Border>
                    
                    <TextBlock x:Name="time"
                               FontFamily="Verdana" FontSize="10" Foreground="#99ffffff"
                               VerticalAlignment="Center" Margin="5,0,5,0"
                               Grid.Column="3"
                               Width="80"
                               Text="00:00 / 00:00"
                               />
                </Grid>
            </Border>
        </Grid>
        </Grid>
        
        </Border>
</UserControl>
